<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- <el-tab-pane label="客户价格" name="first"> -->
          <el-row>
            <el-col :span="24">
              <div class="header">
                <el-form
                  ref="khForm"
                  :model="khForm"
                  label-width="100px"
                  class="flex"
                >
                  <el-form-item label="单号/包号" style="margin-left: 10px">
                    <el-input
                      v-model="khForm.clientName"
                      placeholder="请输入客户名称"
                      style="width: 286px"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-checkbox-group v-model="type1" size="medium" style="width: 286px;">
                      <el-checkbox size="medium" label="包内件查询" name="type" />
                      <!-- <el-checkbox label="地推活动" name="type" />/ -->
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="结算网点">
                    <el-input
                      v-model="khForm.clientCode"
                      placeholder="请输入报价编号"
                      style="width: 286px"
                    />
                  </el-form-item>
                  <el-form-item label="进/出港">
                    <el-input
                      v-model="khForm.nickName"
                      placeholder="请输入客户昵称"
                      style="width: 286px"
                    />
                  </el-form-item>
                  <el-form-item style="margin-left: 15px">
                    <el-button
                      type="primary"
                      class="bt"
                      :class="id===1?'active':''"
                      @click="getKhList"
                    >查询</el-button>
                    <el-button
                      class="bt"
                      :class="id===2?'active':''"
                      @click="khClear"
                    >重置</el-button>
                  </el-form-item>
                  <el-form-item
                    label="费用类别"
                    style="margin-left: 10px"
                  >
                    <el-select
                      v-model="khForm.clientScreen"
                      placeholder="请选择有效客户筛"
                      style="width: 286px"
                    >
                      <el-option
                        label="近一个月内发货"
                        value="近一个月内发货"
                      />
                      <el-option
                        label="近两个月内发货"
                        value="近两个月内发货"
                      />
                      <el-option
                        label="近三个月内发货"
                        value="近三个月内发货"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="费用大类">
                    <el-select
                      v-model="khForm.clientScreen"
                      placeholder="请选择有效客户筛"
                      style="width: 286px"
                    >
                      <el-option
                        label="近一个月内发货"
                        value="近一个月内发货"
                      />
                      <el-option
                        label="近两个月内发货"
                        value="近两个月内发货"
                      />
                      <el-option
                        label="近三个月内发货"
                        value="近三个月内发货"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="揽件员">
                    <el-select
                      v-model="khForm.clientType"
                      placeholder="请选择客户类型"
                      style="width: 286px"
                    >
                      <el-option
                        label="本网点客户"
                        value="本网点客户"
                      />
                      <el-option
                        label="业务员客户"
                        value="业务员客户"
                      />
                      <el-option
                        label="虚拟承包区客户"
                        value="虚拟承包区客户"
                      />
                      <el-option
                        label="承包区客户"
                        value="承包区客户"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="派件员">
                    <el-select
                      v-model="khForm.clientScreen"
                      placeholder="请选择有效客户筛"
                      style="width: 286px"
                    >
                      <el-option
                        label="近一个月内发货"
                        value="近一个月内发货"
                      />
                      <el-option
                        label="近两个月内发货"
                        value="近两个月内发货"
                      />
                      <el-option
                        label="近三个月内发货"
                        value="近三个月内发货"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item style="margin-left: 15px">
                    <el-button
                      class="bt"
                      type="primary"
                      :class="id===3?'active':''"
                      @click="khSearch"
                    >导出</el-button>
                    <el-button
                      class="bt"
                      :class="id===4?'active':''"
                      @click="khClear1"
                    >更多</el-button>
                  </el-form-item>
                  <el-form-item label="客户名称" style="margin-left: 10px">
                    <el-input
                      v-model="khForm.nickName"
                      placeholder="请输入客户昵称"
                      style="width: 286px"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-checkbox-group v-model="type1" size="medium" style="width: 286px;">
                      <el-checkbox size="medium" label="金额不为0" name="type" />
                      <!-- <el-checkbox label="地推活动" name="type" />/ -->
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="承包区">
                    <el-select
                      v-model="khForm.clientStatus"
                      placeholder="请选择客户状态"
                      style="width: 286px"
                    >
                      <el-option label="有效" value="有效" />
                      <el-option label="无效" value="无效" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-select
                      v-model="khForm.clientStatus"
                      placeholder="请选择客户状态"
                      style="width: 132px;margin-left: -90px;"
                    >
                      <el-option label="有效" value="有效" />
                      <el-option label="无效" value="无效" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-date-picker
                      v-model="value1"
                      style="margin-left: -90px;"
                      type="monthrange"
                      range-separator="至"
                      start-placeholder="开始月份"
                      end-placeholder="结束月份"
                    />
                  </el-form-item>

                </el-form>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col :span="6">
              <div>当前页共{{ khTotal }}项</div>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col :span="24">
              <el-table
                :data="khTable"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }"
                border
                style="width: 100%"
              >
                <el-table-column
                  fixed
                  prop="clientName"
                  label="运单号"
                  width="150"
                />
                <el-table-column
                  fixed
                  prop="nickName"
                  label="大包号"
                  width="120"
                />
                <el-table-column
                  prop="clientCode"
                  label="结算网点名称"
                  width="120"
                />
                <el-table-column
                  prop="clientSource.clientSource"
                  label="费用名称"
                  width="120"
                />
                <el-table-column
                  prop="parentClientId"
                  label="结算科目名称"
                  width="110"
                />
                <el-table-column
                  prop="clientType"
                  label="费用子项名称"
                  width="120"
                />
                <el-table-column
                  prop="objectName"
                  label="收入(元)"
                  width="120"
                />
                <el-table-column
                  prop="selletType"
                  label="支出(元)"
                  width="120"
                />
                <el-table-column
                  prop="sheetFee"
                  label="结算重量"
                  width="120"
                />
                <el-table-column
                  prop="preSheetFee"
                  label="费用说明"
                  width="120"
                />
                <el-table-column
                  prop="unSheetFee"
                  label="寄件日期"
                  width="120"
                />
                <el-table-column
                  prop="objectSellPrice"
                  label="会计日期"
                  width="120"
                />
                <el-table-column
                  prop="incomingPrice"
                  label="会计"
                  width="120"
                />
                <el-table-column
                  prop="fullLimit"
                  label="日充值上限"
                  width="120"
                />
                <el-table-column
                  prop="clientStatus"
                  label="客户状态"
                  width="120"
                />

                <el-table-column label="操作" width="120" fixed="right">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="edit(scope.row)"
                    >修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <div style="display: flex;justify-content: space-between;">
            <div style="display: flex;">
              <div
                class="text"
              >合计金额：<span class="shu">1234</span></div>
              <div
                style="width: 1px;
height: 24px;
background: #EBECEE;margin: 0 24px;"
              />
              <div class="text">总收入：<span class="shu">1234</span></div>
              <div
                style="width: 1px;
height: 24px;
background: #EBECEE;margin: 0 24px;"
              />
              <div class="text">总支出：<span class="shu">1234</span></div>
            </div>
            <div class="block" style="display: flex; justify-content: end">
              <el-pagination
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="khTotal"
                prev-text="上一页"
                next-text="下一页"
                @size-change="khHandleSizeChange"
                @current-change="khHandleCurrentChange"
              />
            </div>

          </div>
        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="30%"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: '',
      dialogVisible: false,
      type1: true,
      currentPage4: 1,
      id: 1,
      editkhForm: {
        fullLimit: '',
        sheetFee: '',
        selletType: ''
      },
      editYwyForm: {
        sheetFee: ''
      },
      editCbqForm: {
        sheetFee: ''
      },
      editDdForm: {
        sheetFee: ''
      },
      khForm: {
        clientCode: '',
        clientName: '',
        clientScreen: '',
        clientSourceId: '',
        clientStatus: '',
        clientType: '',
        networkNameId: '',
        nickName: '',
        objectName: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        parentClientId: ''
      },
      ywyForm: {
        networkNameId: '',
        salesmanName: '',
        salesmanCode: '',
        salesmanStatus: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      cbqForm: {
        networkNameId: '',
        contractName: '',
        contractCode: '',
        contractStatus: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      ddForm: {
        networkNameId: '',
        sheetName: '',
        sheetCode: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },

      // 客户表格
      khTable: [],
      // 业务员表格
      ywyTable: [],
      // 承包区表格
      cbqTable: [],
      // 兜底表格
      ddTable: [],
      khTotal: 0,
      ywyTotal: 0,
      ddTotal: 0,
      cbqTotal: 0,
      activeName: 'first',
      // 网点列表
      networkList: [],

      // 平台来源
      PlatformAllList: []
    }
  },
  created() {
    this.getOutLet()
    this.getPlatformList()
    this.getKhList()
  },
  methods: {
    getKhList() {
      this.id = 1
    },
    khClear() {
      this.id = 2
    },
    khSearch() {
      this.id = 3
    },
    khClear1() {
      this.id = 4
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0px 20px;
}
.bt{
  background: #FFFFFF;
                      border: 1px solid #666666;
                      border-radius: 4px;
                      font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
}
.active{
  background: #2087D0;
  font-family: Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
}
.text{
  font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #2087D0;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
